<template>
  <div class="container">
    <div class="content-img">
      <!-- <img :src="book.imgurl" /> -->
      <!-- 3.这里实现图片放大镜的功能 -->
      <!-- <pic-zoom
        :url="book.imgurl"
        :scale="3"
        :scroll="true"
        width="100%"
        height="100%"
      ></pic-zoom> -->
    </div>
    <div class="item-content">
      <div class="book-info">
        <div class="bname">
          <h2>{{ book.name }}</h2>
        </div>
        <div class="category">
          <span>
            分类:
            <span class="name">{{ book.category }}</span>
          </span>
        </div>
        <div class="detail-book-desc">
          <h3>{{ book.desc }}</h3>
        </div>
        <!-- <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            ></el-rate> -->
        <div class="detail-book-price">
          <p>{{ book.description }}</p>
          <!-- <a href="#" style="display:inline">降价通知</a> -->
          <span class="seckill-price text-danger">
            <!-- <Icon type="logo-yen"></Icon> -->
            ￥{{ book.price }}
          </span>
        </div>
      </div>
      <div class="book-detail-buy">
        <div class="book-detail-computer">
          <!-- <Computer></Computer> -->
          <br />
          <span>
            每账户最多买
            <em style="color: red">{{ book.pnum }}</em
            >件
          </span>
        </div>
        <el-button
          icon="el-icon-shopping-cart-1"
          type="success"
          @click="addShopCart()"
          >加入购物车</el-button
        >
        <el-button type="danger" plain @click="toBuy()">立即购买</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import myapi from "../api";
// import PicZoom from "vue-piczoom";
export default {
  name: "BookDetails",
  data() {
    return {
      book: [],
    };
  },
  methods: {
    addShopCart() {
      this.$store.dispatch("addBook",this.book); 
      this.$router.push("/cart");
      //  let index =-1;
      // for(let i=0;i<this.$store.state.cart.length;i++){
      //   if(bk.id===this.$store.state.cart[i].id){
      //     index=i;
      //     break;
      //   }
      // }
      // if(index>=0){
      // this.$store.state.cart[index].number++;
      // this.$store.state.cart[index].lineTotal+=bk.price;
      // }
      // else{
      //   this.book['number']=1;
      //  this.book['lineTotal']=this.book.price;
      // this.$store.state.cart.push(this.book);
      // } 
      // this.book['number']=1;
      // this.book['lineTotal']=this.book.price;
      // this.$store.state.cart.push(this.book);
    
      //  for (this.book.name : args) {
      //   if (s.equals(str)){
      //       return true;
      //   }
    },
    toBuy() {},
  },
  mounted() {
    this.book = this.$store.state.book;
  },
  // components: {
  //   PicZoom,
  // },
};
</script>
<style scoped>
.container {
  /* padding-top:50px ; */
  margin-left: 20%;
  margin-top: 20px;
  margin-top: 50px;
  height: 600px;
  display: flex;
}
.seckill-item {
  display: flex;
}
.item-content {
  margin-left: 20px;
  width: 700px;
}
.bname {
  font-size: 20px;
  color: black;
}
/* 装图片的容器 */
.content-img {
  width: 320px;
  height: 320px;
}
.content-img img {
  height: 100%;
  width: 100%;
}
.category .name {
  color: blue;
}
.detail-book-desc {
  margin: 10px auto;
  color: black;
  font-family: Microsoft Yahei;
}
.detail-book-price {
  padding-top: 25px;
  margin-bottom: 10px;
  height: 150px;
  background-color: #fcfaf7;
}
.detail-book-price span:nth-child(2) {
  color: red;
  font-size: 25px;
}
.detail-book-price p {
  margin-left: 8px;
  color: gray;
  font-size: 15px;
}
.book-detail-buy {
  margin-top: 40px;
}
.book-detail-computer {
  margin-bottom: 10px;
}
.book-detail-computer span {
  margin-top: 5px;
}
</style>